<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>慢SQL监控</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* 长文本截断样式 */
        .text-truncate {
            max-width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            cursor: pointer;
        }

        /* 排序指示器样式 */
        .sortable-header {
            cursor: pointer;
            position: relative;
            padding-right: 20px !important;
        }
        .sort-indicator {
            position: absolute;
            right: 5px;
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
</head>
<body class="container mt-4">
<!-- 搜索表单（保持不变） -->
<form th:action="@{/slow-sql}" method="get" class="mb-4 border p-3 rounded">
    <!-- ... 表单内容保持不变 ... -->
</form>

<!-- 数据表格 -->
<table class="table table-striped table-hover" id="dataTable">
    <thead class="table-dark">
    <tr>
        <th>SQL指纹</th>
        <th>数据库</th>
        <th>主机</th>
        <th class="sortable-header" onclick="sortTable(4)">
            执行次数
            <span class="sort-indicator">▲</span>
        </th>
        <th>总耗时</th>
        <th>源文件</th>
        <th>文件大小</th>
        <th>时间范围</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="sql : ${slowSqlList}">

        <!-- 指纹列截断处理 -->
        <td class="text-truncate"
            data-bs-toggle="tooltip"
            data-bs-placement="top"
            th:attr="title=${sql.fingerprint}">
            <span th:text="${#strings.substring(sql.fingerprint,0,20) + (#strings.length(sql.fingerprint) > 20 ? '...' : '')}"></span>
        </td>
        <td th:text="${sql.db}"></td>
        <td th:text="${sql.host}"></td>
        <td th:text="${sql.queryCount}" data-sort-value="${sql.queryCount}"></td>
        <td th:text="${sql.queryTimeSum}"></td>
        <!-- 文件路径截断处理 -->
        <td class="text-truncate"
            data-bs-toggle="tooltip"
            data-bs-placement="top"
            th:attr="title=${sql.rawFilePath}">
            <span th:text="${#strings.substring(sql.rawFilePath,0,15) + (#strings.length(sql.rawFilePath) > 15 ? '...' : '')}"></span>
        </td>
        <td th:text="${sql.rawFileSize}"></td>
        <td>
            <span th:text="${sql.tsMin}"></span> -
            <span th:text="${sql.tsMax}"></span>
        </td>
    </tr>
    </tbody>
</table>

<!-- 依赖脚本 -->
<script src="/js/bootstrap.bundle.min.js"></script>
<script>
    // 初始化Tooltip
    document.addEventListener('DOMContentLoaded', function () {
        new bootstrap.Tooltip(document.body, {
            selector: '[data-bs-toggle="tooltip"]'
        });
    });

    // 排序功能实现
    let ascending = true;
    function sortTable(columnIndex) {
        const table = document.getElementById('dataTable');
        const rows = Array.from(table.tBodies[0].rows);

        rows.sort((a, b) => {
            const aVal = parseInt(a.cells[columnIndex].getAttribute('data-sort-value'));
            const bVal = parseInt(b.cells[columnIndex].getAttribute('data-sort-value'));
            return ascending ? aVal - bVal : bVal - aVal;
        });

        // 更新排序指示器
        const indicator = document.querySelector('.sort-indicator');
        indicator.textContent = ascending ? '▲' : '▼';
        ascending = !ascending;

        // 重新插入排序后的行
        table.tBodies[0].append(...rows);
    }
</script>
</body>
</html>